<template>
	<view>
		<view class="nav w-full">
			<uni-nav-bar title="拼团业绩" left-icon="back" @clickLeft="$tab.back()" :border="false" :status-bar="true"
				:fixed="true" background-color="transparent" color="#FFF"></uni-nav-bar>

			<view class="navData">
				<view class="text-32 title">
					团队团购
				</view>
				<view class="ftitle font-700 text-FFF mt-12">
					{{totalData}}
				</view>
			</view>
		</view>

		<view class="" style="height:420rpx;">

		</view>

		<view class="px-20">
			<view class="text-28 flex items-center justify-between pt-20">
				<view class="text-36 font-700">
					提现明细
				</view>
				<view class="flex items-center" @click="timePicker = true">
					<view>
						{{selectedTime}}
					</view>
					<image src="https://coo.fcios.com/profile/upload/2023/01/17/icon_down.png" class="ml-16 image-40"
						mode=""></image>
				</view>
			</view>
			<u-divider></u-divider>

			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				<view class="" v-for="(item,index) in list" :key="item.id">
					<view class="flex items-center justify-between">
						<view class="">
							<view class="text-28">
								何青青参与抢购
							</view>
							<view class="text-24 text-gray mt-12">
								{{item.createTime}}
							</view>
						</view>
						<view class="text-FF7C01 text-36">
							+{{item.incomePrice}}
						</view>
					</view>
					<u-divider></u-divider>
				</view>
			</s-pull-scroll>
		</view>

		<u-datetime-picker :show="timePicker" v-model="time" @confirm="timeConfirm" @close="timePicker=false" @cancel="timePicker=false" mode="year-month" :formatter="formatter" :closeOnClickOverlay="true"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timePicker: false,
				selectedTime: "",
				list: [],
				time:Number(new Date()),
				totalData:null
			};
		},
		onLoad(e) {
			this.selectedTime = this.$modal.timeFun(Number(new Date()), 'YYYY-MM')
			this.getData()
			this.refresh()
		},
		methods: {
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				return value
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}
					
					const res = await this.$Api.currency.groupSettleRecord({
						pageNum:pullScroll.page,
						pageSize:10,
						date:this.selectedTime
					})
					
					this.totalData = res.data

					this.list = this.list.concat(res.rows || []);
					if(res.total == 0){
						pullScroll.empty();
					}
					
					if (this.list.length > res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			},
			async getData() {

			},
			timeConfirm(e) {
				this.selectedTime = this.$modal.timeFun(e.value, 'YYYY-MM')
				this.timePicker = false
				this.refresh()
			},
		}
	}
</script>

<style lang="scss">
	.nav {
		height: 420rpx;
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		background: url('https://file.fulewanjia.com/fulewanjia/profile/appImages/common/pintuanbg.png');
		background-size: 100% 100%;

		.navData {
			position: absolute;
			left: 52rpx;
			top: 55%;
			transform: translateY(-50%);

			.title {
				color: #FFA6A4;
			}

			.ftitle {
				font-size: 56rpx;

			}
		}
	}
</style>